<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人信息</title>
    <link rel="stylesheet" href="../../../css/header.css">
    
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            font-family: 微软雅黑;
            font-size: .4348rem;
            
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        ul li{
            list-style: none;
        }
        ::-webkit-scrollbar{
            width: 0rem;
        }
        body{
            background: #f6f6f6cb;
            display: flex;
            flex-direction: column;
            position: relative;
            
            
        }
        section{
            /*
            border: 1px solid red;*/

            
            /**/

            flex: 1;
            background-color: #f6f6f6cb;
            position: relative;
            /*
            display: flex;
            justify-content: center;*/
            /*部分安卓真机header不显示
            min-height: fit-content;*/
            overflow-y: scroll;

        }
        .container{
            /*
            border: 1px solid rgb(119, 255, 0);*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        ul{
            /*
            border: 1px solid rgb(255, 0, 0);*/
            border-radius: .2415rem;
            width: 90%;
            margin-top: .4831rem;
            box-sizing: border-box;
            padding: .6039rem .4831rem;
            background: #fff;
            box-shadow: .1208rem .1208rem .1208rem rgba(151, 151, 151, 0.077);
        }
        ul li{
            /*
            border: 1px solid rgb(119, 255, 0);*/
            border-bottom: .0121rem solid rgba(173, 173, 173, 0.173);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: .2415rem .2415rem;
        }
        ul li span{
            /*
            border: 1px solid rgba(0, 119, 255, 0.138);*/
            display: inline-block;
            
        }
        ul li span{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        /*
        ul li span:nth-child(2){
            max-width: 4.8309rem;
        }*/
        .user_pic{
            width: 1.2077rem;
            height: 1.2077rem;
        }
        input{
            width: 3.6232rem;
            font-size: .4348rem;
            height: .7246rem;
            line-height: .7246rem;
            border: none;
            outline: none;
            background: #fff;
            letter-spacing: .0242rem;

        }
        
        select{
            all: unset;
            width: 3.6232rem;
            height: .7246rem;
            line-height: .7246rem;
            text-align: center;
            font-size: .4348rem;
            background: #fff;
        }
        select option{
            text-align: center;
            font-size: .4348rem;
        }
        .signature{
            flex-direction: column;

        }
        .signature span{
            margin-bottom: .2415rem;
        }
        .signature textarea{
            width: 100%;
            border-radius: .1208rem;
            font-size: .4348rem;
            font-family: 微软雅黑;
            box-sizing: border-box;
            padding: .1932rem;
            resize: none;
            background: #fff;
            border: .0242rem solid rgba(189, 189, 189, 0.373);
            outline: .0024rem solid rgba(166, 166, 166, 0.153);
        }
        button{
            width: 80%;
            font-size: .3623rem;
            height: .9662rem;
            margin-top: .4831rem;
            background: #2493f1;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: none;
            border-radius: .1208rem;
        }
        /*弹窗样式*/
        #alert{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .window{
            border-radius: .2415rem;
            font-size: .4106rem;
            color: #fff;/*
            width: fit-content;*/
            max-width: 80%;
            min-height: .4831rem;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: .1932rem .4831rem;
            background-color: #323232;
        }
    </style>
    <script src="../../../lib/vue.js"></script>
    <script src="../../../lib/axios.js"></script>
    <script>
        document.addEventListener('visibilitychange',
        function(){
            if(document.visibilityState === "visible"){
                setTimeout(()=>{
                    location.reload()
                }, 1000)
            }
        }
        )
    </script>
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">个人信息</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>

    <section>
        <div class="container">
            <ul>
                <li>
                    <span>头像</span>
                    <span @click="change_pic()"><img class="user_pic" :src="pic" alt=""></span>
                </li>
                <li>
                    <span>昵称</span>
                    <span><input type="text" name="" id="" v-model="name" @input="size('name')" placeholder="请输入昵称"></span>
                </li>
                <li>
                    <span>性别</span>
                    <span>
                        <select v-model="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </span>
                </li>
                <li>
                    <span>年龄</span>
                    <span><input type="number" style="text-align: center;" name="" id="" v-model="age" oninput="if(value>130)value=130;if(value<0)value=0"></span>
                </li>
                <li class="signature" style="border-bottom: none;">
                    <span style="align-items: flex-start;">个性签名</span>
                    <span><textarea name="" id=""rows="4" v-model="signature" @input="size('signature')" placeholder="编辑你的个性签名"></textarea></span>
                </li>
                
                <li style="justify-content: center; border-bottom: none;">
                    <button type="button" @click="submit()" >提交</button>
                </li>
            </ul>


            
            
        </div>


        <!-- 弹窗 -->
        <div id="alert" v-show="alertShow" @click="closeAlert()">
            <div class="window">
                {{alertText}}
            </div>
        </div>
    </section>
    




    <script>
        new Vue({
            el: "section",
            data: {
                pic: '../../../images/person/person_senter/defaultUserImg.webp',
                name: '',
                sex: '女',
                age: 18,
                signature: '',
                alertShow: false,
                alertText: "",
            },
            methods: {
                change_pic(){
                    //跳转至修改头像页面
                    window.location.href='./edit_pic.html'
                },
                size(text){
                    switch (text) {
                        case 'name'://10个字符
                        this.name = this.name.substr(0, 10)
                        break
                        case 'signature'://40个字符
                        this.signature = this.signature.substr(0, 40)
                        break
                    }
                    
                },
                submit(){
                    let btn = document.querySelector("button")
                    btn.style.background="#85b8fb"
                    let userInfo = localStorage.getItem('XGB-user')
                    var id = JSON.parse(userInfo).id
                    let _this = this
                    fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/edit_information/edit_userInformation?id=${id}&name=${this.name}&sex=${this.sex}&age=${this.age}&signature=${this.signature}`)
                    .then(res=>res.json())
                    .then(res=>{
                        console.log(res)
                        if(res.code === -1){
                            this.alertShow = true
                            this.alertText=res.msg
                            let btn = document.querySelector("button")
                            btn.style.background="#2493f1"
                        } else if (res.code === 0){
                            //修改成功
                            if(res.res.affectedDocs === 1){
                                this.alertShow = true
                                this.alertText='修改成功！'
                                let btn = document.querySelector("button")
                                btn.style.background="#2493f1"
                                //写入新数据
                                let userInfo2 = JSON.parse(userInfo)
                                userInfo2.name = _this.name
                                userInfo2.gender = _this.sex
                                userInfo2.age = _this.age
                                userInfo2.signature = _this.signature
                                localStorage.setItem('XGB-user', JSON.stringify(userInfo2))
                            }else{
                                this.alertShow = true
                                this.alertText='您未做任何修改！'
                                let btn = document.querySelector("button")
                                btn.style.background="#2493f1"
                            }
                        }
                        
                        

                    })
                    
                },
                closeAlert(){
                    this.alertShow = false
                },
            },
            mounted(){
                let userInfo = localStorage.getItem('XGB-user')
                    if(userInfo !==null){
                        var name = JSON.parse(userInfo).name
                        var userImg = JSON.parse(userInfo).userImg
                        var gender = JSON.parse(userInfo).gender
                        var age = JSON.parse(userInfo).age
                        var signature = JSON.parse(userInfo).signature
                        

                        this.sex = gender
                        this.age = age
                        if (name !== ""){
                            this.name = name
                        }
                        if (userImg !== ""){
                            this.pic= userImg
                        }
                        if (signature !== ""){
                            this.signature= signature
                        }

                        
    
                    }
            }
        })
    </script>


    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>